<style type="text/css">
    .scroll-list{

    }
    .scroll-list ul{
        height: 300px;
    }
    .scroll-list ul li{
        border-top: 1px dashed #333;
        padding: 5px;
        cursor: pointer;
        list-style-type: none;
    }
    .scroll-list ul li:hover{
        background-color: #BABABA;
        color: #000000;
    }
    .scroll-list ul li.restrict,.scroll-list ul li.restrict:hover{
        background-color: #ffffff;
        color: #e5a6a6;
        cursor: not-allowed;
    }
    .scroll-list ul li.selected{
        background-color: #D1D1D1;
        color: #000000;
    }
    .widgetcontent p.error{
        color: #ff1f15;
    }
    .ui-datepicker-trigger{
        vertical-align: middle;
        width: auto;
        cursor: pointer;
    }
    input[disabled] {
       background-color: #ffffff;
    }
</style>
<div class="row-fluid">

    <div class="span4">
        <div class="widgetbox" id="widget_contact_options">
            <div class="headtitle">
                <h4 class="widgettitle">Send Options</h4>
            </div>
            <div class="widgetcontent">
                <div class="tabs-top">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#group_list_tab">SMS By Contact Group</a></li>
                        <li><a data-toggle="tab" href="#sms_import_tab">SMS By Excel Import</a></li>
                    </ul>
                    <div class="tab-content">
                        <div id="group_list_tab" class="tab-pane active">
                            <p>Please Select The Group(s) To Send SMS</p>
                            <div class="scroll-list">
                                <ul>
                                    <?php
                                    foreach($contacts_in_group as $key => $value){
                                        $g_count = $value['count'];
                                        $g_name = $value['name'];
                                        $restricted = '';
                                        $span_class = 'iconfa-check-empty';
                                        if($g_count == 0){
                                            $restricted = 'restrict';
                                            $span_class = 'iconfa-warning-sign';
                                        }
                                        ?>
                                        <li data-id="<?php echo $key;?>" class="<?php echo $restricted;?>">
                                            <span class="<?php echo $span_class;?>"> </span>&nbsp;<?php echo $g_name.' ('.$g_count.' Contacts)';?>
                                        </li>
                                    <?php
                                    }
                                    ?>
                                </ul>
                            </div>
                        </div>
                        <div id="sms_import_tab" class="tab-pane">
                            <p>Please Click
                                <a target="_blank" href="<?php echo $this->Html->url('/').'files/'.'SMS Template.xlsx'; ?>"><span class="icon-file"></span><strong>SMS Template Excel File</strong></a>
                                To Download The SMS Template File To Use.
                            </p>
                            <p class="stdformbutton" style="margin-left: 0px;">
                                OR
                            </p>
                            <p class="stdformbutton" style="margin-left: 0px;">
                                Click the button below if you have the SMS template file already.
                            </p>
                            <p class="stdformbutton" style="margin-left: 0px;">
                                <button type="button" id="send_sms_import_btn" class="btn">Upload File And Send</button>
                            </p>
                        </div>
                    </div><!--tab-content-->
                </div><!--tabs-left-->
                <p class="stdformbutton" id="stdformbutton" style="margin-left: 0px;">
                    <button type="button" id="select_all_btn" class="btn btn-primary">Select All</button>
                    <button type="button" id="unselect_all_btn" class="btn btn-danger">Unselect All</button>
                    <button type="button" id="add_to_collection_btn" class="btn">Add Recipients</button>
                </p>
            </div>
        </div>
    </div><!--span8-->

    <div class="span4 profile-left">
        <div class="widgetbox" id="widget_contact_collection">
            <div class="headtitle">
                <h4 class="widgettitle">Recipients</h4>
            </div>
            <div class="widgetcontent">
                <p class="error" style="display: none"></p>
                <p>Please Select And Add Contacts From Contacts Options</p>
                <p>To Remove Recipients, Select The Recipients And Click Remove Recipients Or Click On Remove All To Clear All Recipients. </p>
                <div class="scroll-list" id="cart_collection">
                    <ul>

                    </ul>
                </div>

                <p class="stdformbutton" id="cart_collection_btns" style="margin-left: 0px; display: none">
                    <button type="button" id="remove_from_collection_btn" class="btn">Remove Recipients</button>
                    <button type="button" id="remove_all_btn" class="btn btn-primary">Remove All</button>
                </p>

            </div>
        </div>
    </div>

    <div class="span4 profile-left">
        <div class="widgetbox" id="widget_sms">
            <div class="headtitle">
                <h4 class="widgettitle">SMS Message</h4>
            </div>
            <div class="widgetcontent">
                <p class="error" style="display: none"></p>
                <form class="stdform">
                    <p>Sender ID (Up To 11 Alphanumeric Characters)</p>
                    <p>
                        <span class="field" style="margin-left: 0px;">
                            <input type="text" id="sender_id" class="span12" maxlength="11"/>
                        </span>
                    </p>
                    <p>Type Message Here</p>
                    <p>
                        <span class="field" style="margin-left: 0px;">
                            <textarea id="sms_txt"  rows="5" class="span12"></textarea>
                        </span>
                    </p>

                    <p class="stdformbutton" style="margin-left: 0px;">
                        <button type="button" id="send_sms_btn" class="btn btn-primary">Send SMS Now</button>
                        <button type="button" id="send_sms_later_btn" class="btn btn-inverse">Send SMS Later</button>
                    </p>
                </form>
            </div>
        </div>
    </div><!--span4-->

</div><!--row-fluid-->

<button
    id="import_contact_group_btn"
    style="display: none"
    type="button"
    class="multiple-file-upload-manager"
    data-url='<?php echo $this->Html->url(array('controller' => 'Sms', 'action' => 'sms_uploads')); ?>'
    data-save_to="files/user_<?php echo $user_id; ?>"
    data-max-filesize='2000000'
    data-filetypes='/(\.|\/)(csv|xls|xlsx)$/i'
    data-number_upload_files='1'
    data-extra_params_callback='func_extra_param'
    data-callback='func_callback'>
    <i class="fa fa-cloud-upload"></i> Upload
</button>

<div id="sms_schedule_modal" class="modal hide fade">
    <form class="form form-horizontal" method="post" action="" enctype="" style="margin: 0px;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4>Select Date And Time For The Schedule</h4>
        </div>
        <div class="modal-body" style="height: 220px;">
            <div class="control-group">
                <?php
                $time_10_min = date("H:i",strtotime('+10 minutes',strtotime(date("H:i"))));
                $now_day = date('d');
                $now_month = date('m');
                $now_year = date('Y');
                ?>
                <label class="control-label" for="password"><strong>Schedule Date:</strong></label>
                <div class="controls">
                    <select id="schedule_day" class="span1" style="float: left">
                        <?php foreach($days_opt as $key=>$value) {
                            $selected = $key == $now_day ? 'selected':'';
                            ?>
                            <option value="<?php echo $key; ?>" <?php echo $selected; ?>><?php echo $value; ?></option>
                        <?php } ?>
                    </select>
                    <select id="schedule_month" class="span2" style="float: left">
                        <?php foreach($month_opt as $key=>$value) {
                            $selected = $key == $now_month ? 'selected':'';
                            ?>
                            <option value="<?php echo $key; ?>" <?php echo $selected; ?>><?php echo $value; ?></option>
                        <?php } ?>
                    </select>
                    <select id="schedule_year" class="span1" style="float: left">
                        <?php foreach($year_opt as $key=>$value) {
                            $selected = $key == $now_year ? 'selected':'';
                            ?>
                            <option value="<?php echo $key; ?>" <?php echo $selected; ?>><?php echo $value; ?></option>
                        <?php } ?>
                    </select>
                    <!--<input id="schedule_date" type="text" name="date" class="input-small" disabled />-->
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="password"><strong>Schedule Time:</strong></label>
                <div class="controls">
                    <div class="input-append bootstrap-timepicker">
                        <select id="schedule_time" class="span2" style="float: ">
                            <?php foreach($time_opt as $key=>$value) {
                                //$selected = $key == $time_10_min ? 'selected':'';
                                ?>
                                <option value="<?php echo $key; ?>"><?php echo $value; ?></option>
                            <?php } ?>
                        </select>
                       <!-- <input id="schedule_time" type="text" class="input-small" disabled/>
                        <span class="add-on btn"><i class="iconfa-time"></i> Click Here For Time</span>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" id="sms_schedule_modal_btn" class="btn btn-primary">Schedule SMS</button>
            <a href="#sms_schedule_modal" class="btn" data-toggle="modal" id="close-sms_schedule_modal">Close</a>
        </div>
    </form>
</div>

<!-- URLs -->
<input type="hidden" id="do-sms-url" value="<?php echo $this->Html->url(array('controller' => 'Sms', 'action' => 'sendSms_skip')); ?>" />

<?php echo $this->element('multiple_file_upload_manager'); ?>

<!-- Le Script -->
<script type="application/javascript">
    var contacts_in_group = <?php echo json_encode($contacts_in_group); ?>;
    var local_sms_per_unit_cost = <?php echo json_encode($local_sms_per_unit_cost); ?>;
    var inter_sms_per_unit_cost = <?php echo json_encode($inter_sms_per_unit_cost); ?>;
    var sms_per_unit_count = <?php echo json_encode($sms_per_unit_count); ?>;
    var credit_balance = <?php echo json_encode($credit_balance); ?>;
</script>
<?php
    echo $this->Html->script('scripts/sms/sms.js');
?>
